import insert from "@/assets/images/insert.png"
import "./index.scss"
import { ABOUT_DATA } from "../constant.jsx"


const SectionItem = ({ title, content, index }) => {
    const renderContent = (item) => {
        if (typeof item === 'string' && item.includes('：')) {
            const [label, text] = item.split('：')
            return (
                <div className="section-content">
                    <span className="bold">{label}</span>：{text}
                </div>
            )
        }
        return <div className="section-content">{item}</div>
    }

    return (
        <div className="section">
            {title && <span className="section-title">{index ? `${index}、${title}` : title}</span>}
            {Array.isArray(content)
                ? content.map((item, idx) => <div key={idx}>{renderContent(item)}</div>)
                : renderContent(content)}
        </div>
    )
}

export default function AboutUs() {
    return (
        <div className="about-us">
            {ABOUT_DATA.头部.map((item, index) => <div key={index} className="one section-content">{item}</div>)}
            <div className="insert-image">
                <img src={insert} alt="公司图片" />
            </div>
            <SectionItem title="愿景" content={ABOUT_DATA.愿景} index="一" />
            <SectionItem title="使命" content={ABOUT_DATA.使命} index="二" />
            <SectionItem title="价值观" content={ABOUT_DATA.价值观} index="三" />
        </div>
    )
}